<template>
  <div class="feedback-box">
    <div class="feedback-search-box">
      <div class="search-box">
        <div class="search-item">
          <span>被授权账号</span>
          <el-input
            class="name"
            style="width:250px"
            v-model="form.usernumber"
            placeholder=" 请输入被授权账号"
            clearable
          ></el-input>
        </div>
        <div class="search-item">
          <span>被授权人姓名</span>
          <el-input
            class="name"
            style="width:250px"
            v-model="form.username"
            placeholder=" 请输入被授权人姓名"
            clearable
          ></el-input>
        </div>
        <div class="search-item">
          <span>所在地区</span>
          <city-Cascader
            style="width:180px"
            :citys="form.citys"
            :level="level"
            @handleChange="handleCityChange"
          ></city-Cascader>
        </div>
        <div class="search-item">
          <el-button
            v-if="type==1"
            class="search"
            type="primary"
            @click="toQuery"
          >查询</el-button>
          <el-button
            v-if="type==2"
            class="search"
            type="primary"
            @click="toQuery"
          >确认授权</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import cityCascader from "../../../component/cityCascader/index.vue"
import Bus from "../../feedbackManage/bus.js"
export default {
  name: "feedback",
  props: ["type"],
  data() {
    return {
      search: "",
      list: [],
      total: 0,
      form: {
        begintime: "",
        endtime: "",
        pagenum: "1", //查询页码
        pagecount: "1", //当前页面总数
        totalpage: "10", //所有页数
        opinionid: "", //意见建议编码
        username: "", //建议人名称
        content: "", //投诉内容
        telnum: "", //投诉人电话
        pagesize: 10, //页码大小
        totalnum: "", //搜索总数
        createtime: "", //投诉时间
        problemid: "",
        type: "0", //回复tab栏
        citys: [],
        province: "", //省份编码
        city: "", //城市编码
        area: "", //区域编码
      },
      level: "0",
      current: 0, //回复tab栏
      boxTittleType: 1, //个人与企业
      tabs: [{
          label: "待回复",
          type: 0
        },
        {
          label: "已回复",
          type: 1
        },
        {
          label: "无需回复",
          type: 2
        }
      ],
      boxTittle: [{
          label: "个人反馈",
          type: 1
        },
        {
          label: "企业反馈",
          type: 2
        }
      ],
      currentPage: 1
    }
  },
  components: {
    cityCascader
  },
  created() {
    this.getAuthority()
    this.geteData()
  },
  mounted() {
  },
  activated() {
    this.getAuthority()
    this.geteData()
    let self = this
    Bus.$on("onload", e => {
      self.geteData()
    })
  },
  methods: {
    getAuthority() {
      let userinfo = localStorage.getItem("userinfo")
      userinfo = JSON.parse(userinfo)
      this.level = userinfo.level
      this.form.province = +userinfo.province || ""
      this.form.city = +userinfo.city || ""
      this.form.area = +userinfo.area || ""
      this.form.citys = []
      this.form.citys.push(+userinfo.province)
      this.form.citys.push(+userinfo.city)
      this.form.citys.push(+userinfo.area)
    },
    // 在这里获取数据
    geteData() {
      if (
        this.form.begintime &&
        this.form.endtime &&
        Date.parse(this.form.begintime) > Date.parse(this.form.endtime)
      ) {
        this.$message({
          message: "结束时间不能早于开始时间",
          type: "warning"
        })
        return
      }
      this.loading = true
      // this.$axios.$post("/app/v1/platform/option/list", this.form).then(res => {
      //   if (res.data.code === 1) {
      //     this.list = res.data.data.list || []
      //     this.total = parseInt(res.data.data.totalnum)
      //     this.loading = false
      //   } else {
      //     this.$message.error(res.data.message)
      //   }
      // })
    },
    toQuery() {
      this.form.pagenum = 1
      this.geteData()
    },
    //分页查询
    // handleCurrentChange(val) {
    //   this.form.pagenum = val + ""
    //   this.geteData()
    // },
    // handleSizeChange(val) {
    //   this.form.pagesize = val
    //   this.form.pagenum = 1
    //   this.geteData()
    // },
    // clickTab(item) {
    //   this.clearData()
    //   this.current = item.type
    //   this.form.pagenum = 1
    //   this.form.pagesize = 10
    //   this.form.type = item.type
    //   this.geteData()
    // },
    // clickTittle(item) {
    //   this.clearData()
    //   this.boxTittleType = item.type
    //   this.form.pagenum = 1
    //   this.form.pagesize = 10
    //   this.current = 0
    //   this.form.type = 0
    //   this.geteData()
    // },
    // 选择城市
    handleCityChange(val) {
      this.form.citys = val
      this.form.province = val[0]
      this.form.city = val[1]
      this.form.area = val[2]
    },
    clearData() {
      this.form.usernumber = ""
      this.form.username = ""
      this.getAuthority()
    }
  },

}

</script>

<style scoped>
.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  line-height: 0;
}

/* .feedback-search-box {
  min-width: 1080px;
} */

.feedback-box {
  padding: 0 20px;
  background: #fff;
  border-left: 5px red;
}

.title-left {
  font-size: 18px;
}

.title-icon {
  /* margin-left: 15px; */
  padding-left: 12px;
  border-left: 12px solid #0064e4;
}

.input-Time {
  padding-right: 20px;
}

.content {
  position: relative;
  height: 84px;
  border-bottom: 1px dashed #bfbfbf;
}

.content-t {
  margin: 12px 0 0px 0;
  height: 32px;
  font-size: 18px;
}

.content span {
  display: inline-block;
}

.content-b {
  height: 37px;
  width: 950px;
  line-height: 30px;
  color: #727272;
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-text {
  width: 950px;
}

.content-createtime {
  position: relative;
  height: 32px;
}

.content-createtime > .data {
  display: inline-block;
  height: 20px;
  top: 0;
  line-height: 20px;
  font-size: 16px;
  color: #a1a1a1;
}

.content-createtime > .content-button {
  padding-left: 20px;
}

.content-createtime > .content-button span {
  color: #0064e4;
  font-size: 14px;
}

.content-createtime > .content-button span:first-child {
  margin-right: 10px;
}

.user {
  top: 10px;
  width: 230px;
  padding-right: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.telnum {
  top: 0px;
  left: 200px;
  padding-left: 55px;
}

.data {
  top: 0px;
  /* right: 343px; */
  right: 30px;
  color: #a1a1a1;
  font-size: 16px;
}

.search-box-top {
  display: flex;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #d2d2d2;
}

.search-item {
  height: 110px;
  line-height: 110px;
  /*border-bottom: 1px solid#d2d2d2;*/
  color: #727272;
}

.search-item span {
  font-size: 14px;
}

.user {
  display: inline-block;
  height: 20px;

  padding-right: 10px;
}

.username {
  height: 35px;
  width: 230px;
  padding-left: 5px;
}

input::-webkit-input-placeholder {
  color: #c0c7da;
}

.search {
  width: 100px;
  top: 35px;
  right: 20px;
}

.search-right {
  top: 0px;
  left: 565px;
}

.feedback-b {
  padding: 30px 0;
}

.content-right {
  /* top: -33px;
  right: 50px;*/
  display: inline-block;
  height: 37px;
  width: 40px;
  text-align: center;
  line-height: 37px;
  font-size: 14px;
  color: #6b97eb;
  cursor: pointer;
}

.content-right-button {
  position: absolute;
  height: 37px;
  top: 28px;
  /* right: 72px; */
}

.currentButtom {
  right: 78px;
}

/*tab*/
.cash-title-list {
  display: flex;
  height: 50px;
  margin: 0 20px 10px 0px;
  padding-left: 20px;
  border-bottom: 1px solid #0064e4;
}

.item-title {
  width: 120px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #bfbfbf;
  text-align: center;
  cursor: pointer;
  color: #727272;
  border-bottom: 1px solid #0064e4;
}

.active {
  color: #0064e4;
  border-color: #0064e4 !important;
  background-color: #fff;
  border-bottom-color: #fff !important;
}

.main {
  margin: 0px 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid#d2d2d2;
}

.checkTab {
  display: flex;
  margin-top: 20px;
}

.checkTab li {
  font-size: 14px;
}

.title {
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

.tittleActive > .bottom_border {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 60px;
  height: 3px;
  border-radius: 4px;
  background: #0064e4;
  transform: translateX(-50%);
}

.title > span {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: 0px;
  color: #727272;
  cursor: pointer;
}

.tittleActive > span {
  color: #0064e4;
  /* border-bottom:2px solid #0064e4;*/
}

/* 查询一栏样式 */
.search-box {
  display: flex;
  justify-content: space-between;
  color: #727272;
}

.name {
  height: 35px;
  width: 220px;
  padding-left: 5px;
}

.nodata {
  text-align: center;
  font-size: 12px;
  height: 60px;
  line-height: 60px;
  color: #909399;
  border-bottom: 1px dashed #bfbfbf;
}

.nodata .el-icon-warning {
  color: #fc9262;
  font-size: 50px;
  vertical-align: middle;
}

</style>